<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			button{
				cursor:pointer;
				border:1px solid transparent;
				text-align: center;
				margin: 5px;
				padding: 6px 12px;
				font-size: 14px;
				border-radius: 4px;
			}
			select{
				padding: 5px 10px;
				font-size:14px;
			}
			.color{
				width: 25px;
				height: 25px;
				border:1px solid black;
				float:left;
				margin-right:5px;
				cursor:pointer
			}
		</style>
	</head>
	<body>
		<div id="commands" style="float:left">
			<button type="button" value="bold">Bold</button>
			<button type="button" value="italic">Italic</button>
			<button type="button" value="underline">Underline</button>
		</div>
		<div style="float:left;padding:5px">
			<select id="cmdFontSize">
				<option>选择字体大小</option>
				<option value="1">超小</option>
				<option value="2">小</option>
				<option value="3">较小</option>
				<option value="4">正常</option>
				<option value="5">较大</option>
				<option value="6">大</option>
				<option value="7">超大</option>
			</select>
		</div>
		<div id="cmdColor" style="float:left;padding:5px">
			<div class="color" style="background: red;" data-color="#f00"></div>
			<div class="color" style="background: green;" data-color="#0f0"></div>
			<div class="color" style="background: blue;" data-color="#00f"></div>
			<div class="color" style="background: black;" data-color="#000"></div>
		</div>
		<div style="clear:both"></div>
		<div>
			<input type="text" id="linkurl">
			<button id="cmdLink" onclick="createLink()">创建链接</button>
		</div>
		<div>
			<input type="text" id="imageurl">
			<button id="cmdImage" onclick="insertImage()">插入图片</button>
		</div>
		<iframe name="richedit" style="height: 400px; width: 600px" src="blank.html"></iframe>
		<script type="text/javascript" src="js/eventUtil.js" ></script>
		<script>
			var commands = document.getElementById("commands");
			var cmdFontSize = document.getElementById("cmdFontSize");
			var cmdColor = document.getElementById("cmdColor");
			EventUtil.addHandler(window, "load", function(){
                frames["richedit"].document.designMode = "on";
            });
            EventUtil.addHandler(commands, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                
                if (target.type == "button"){                    
                    frames["richedit"].document.execCommand(target.value.toLowerCase(), false, null);                        
                }    
            });
            EventUtil.addHandler(cmdFontSize, "change", function(event){
            	event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                if(target.value){
                	frames["richedit"].document.execCommand("fontsize", false, target.value);
                }
            });
            EventUtil.addHandler(cmdColor, "click", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                var colorValue = target.dataset.color;
                if (colorValue){                    
                    frames["richedit"].document.execCommand("forecolor", false, colorValue);                        
                }    
            });
            function createLink(){
            	var url = document.getElementById("linkurl").value;
            	if(url){
            		frames["richedit"].document.execCommand("createlink", false, url);
            	}
            }
            function insertImage(){
            	var imageurl = document.getElementById("imageurl").value;
            	if(imageurl){
            		frames["richedit"].document.execCommand("insertimage", false, imageurl);
            	}
            }
		</script>
	</body>
</html>
